JavaScript Drum Kit

在Web上做一個鼓吧
DEMO

實作

首先需要先監聽keyup event，得知鍵盤觸發的按鍵keycode

 window.addEventListener('keydown', function (e) {})

取得對應的音檔並撥放，透過data-key可以將每個按鍵連接到觸發的聲音

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.play();

為按鍵添加點擊特效，先取得對應keycode的div，並添加class

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
key.classList.add('playing');

當transition結束時，把正在播放的按鍵playing效果移除

監聽所有按鍵div，在transition結束時移除playingclass

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removePlayingClass));
function removePlayingClass(e) {
      if (e.propertyName !== 'transform') return;
      this.classList.remove('playing');
}

接下來調整transition的時間，就大功告成了

transition: all 0.07s ease;

dataset

HTML 中的 dataset 是一個用於存儲自定義數據的屬性。它允許您將自定義數據關聯到 HTML 元素，以便您可以在 JavaScript 中訪問和操作這些數據。dataset 是一個對象，它包含了以 data- 開頭的屬性的鍵-值對，其中鍵是不包括 data- 前綴的部分。

以下舉一個例子

<div id="myElement" data-user-id="123" data-user-name="john_doe"></div>

<div> 元素有兩個自定義數據屬性 data-user-id 和 data-user-name。

在 JavaScript 中，可以通過元素的 dataset 屬性來訪問這些自定義數據

const element = document.getElementById('myElement');

// 訪問自定義數據
const userId = element.dataset.userId; // "123"
const userName = element.dataset.userName; // "john_doe"

可以使用 dataset 屬性來設置、讀取和修改這些自定義數據，這在動態生成 HTML 元素並將數據關聯到元素時非常有用。它通常用於在 JavaScript 中存儲元素相關的信息，以便稍後可以根據這些數據執行操作。